<template>
    <div class="pop-modal" v-if="dialogVisible">
        <div class="pop-content">
            <div class="title">
                <span></span>
                <span>{{ title }}</span>
                <img @click="dialogVisible = false" src="../../assets/close.png" alt="" srcset="">
            </div>
            <div class="content">
                <img src="@/assets/cx_img2.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "PopModal",
    props: {
        title: {
            type: String,
            default: '全流程网上办案数据'
        }
    },
    data() {
        return {
            dialogVisible: false,
            tableData: [
                {
                    id: 1,
                    date: '2016-05-03',
                    name: '全院',
                }, {
                    id: 2,
                    date: '2016-05-03',
                    name: '立案庭',
                    children: [{

                        id: 3,
                        date: '2016-05-01',
                        name: '王小虎',
                    }, {

                        id: 41,
                        date: '2016-05-01',
                        name: '王小虎',
                    }]
                }, {

                    id: 5,
                    date: '2016-05-03',
                    name: '民一庭',
                    children: [{

                        id: 53,
                        date: '2016-05-01',
                        name: '王小虎',
                    }, {

                        id: 54,
                        date: '2016-05-01',
                        name: '王小虎',
                    }]
                }, {

                    id: 6,
                    date: '2016-05-03',
                    name: '民二庭',
                    children: [{

                        id: 43,
                        date: '2016-05-01',
                        name: '王小虎',
                    }, {

                        id: 44,
                        date: '2016-05-01',
                        name: '王小虎',
                    }]
                }, {

                    id: 7,
                    date: '2016-05-03',
                    name: '刑庭',
                    children: [{

                        id: 33,
                        date: '2016-05-01',
                        name: '王小虎',
                    }, {

                        id: 34,
                        date: '2016-05-01',
                        name: '王小虎',
                    }]
                }, {

                    id: 8,
                    date: '2016-05-03',
                    name: '知产庭',
                    children: [{

                        id: 13,
                        date: '2016-05-01',
                        name: '王小虎',
                    }, {

                        id: 14,
                        date: '2016-05-01',
                        name: '王小虎',
                    }]
                }, {

                    id: 9,
                    date: '2016-05-03',
                    name: '行政庭',
                    children: [{

                        id: 23,
                        date: '2016-05-01',
                        name: '王小虎',
                    }, {

                        id: 24,
                        date: '2016-05-01',
                        name: '王小虎',
                    }]
                },
            ]
        }
    }
}
</script>

<style lang="less" scoped>
.pop-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    background: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    .pop-content {
        width: 1423px;
        height: 820px;
        border-radius: 10px 10px 10px 10px;
        background: #021730;
        display: flex;
        flex-direction: column;
        background: url(../../assets/open_1.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .title {
            display: flex;
            justify-content: space-between;
            font-size: 30px;
            color: #FFFFFF;
            padding: 26px 30px;
            line-height: 30px;

            img {
                width: 29px;
                cursor: pointer;
            }
        }

        .content {
            flex: 1;
            width: 100%;
            overflow: auto;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            padding: 0 40px 20px;

           img{
            width: 100%;
            height: 100%;
           }
        }
    }
}

</style>